<template>
  <van-loading size="20" v-if="isLoading" />
  <van-icon
    v-else
    :color="isLike === 1 ? '#ffa500' : '#777'"
    :name="isLike === 1 ? 'good-job' : 'good-job-o'"
    @click="onLike"
  />
</template>

<script>
import { addLike, delLike } from '@/api/article'
export default {
  props: ['article'],
  data () {
    return {
      isLike: -1,
      isLoading: false
    }
  },

  created () {
    this.isLike = this.article.attitude
  },

  methods: {
    async onLike () {
      this.isLoading = true
      try {
        if (this.isLike !== 1) {
          // 未点赞 点击添加点赞
          await addLike(this.article.art_id)
          this.$toast('点赞成功！')
          this.isLike = 1
        } else {
          // 已点赞 点击取消点赞
          await delLike(this.article.art_id)
          this.$toast('取消点赞成功！')
          this.isLike = -1
        }
      } catch (error) {
        this.$toast('发生了一个错误，请稍后再试！')
      }
      this.isLoading = false
    }
  }
}
</script>

<style scoped lang="less">
.van-loading {
  font-size: 10px;
}
</style>
